<template>
  <el-container class="layoutMain">
    <el-aside width="200px" class="layout-aside">
      <div class="layout-aside-content" style="">
        <div>
          <el-avatar :size="80" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
        </div>
        <span>{{currentUser.username}}</span>
        <!-- <el-dropdown style="margin-top: 20px;" trigger="click" @command="handleUserCommand">
          <span class="el-dropdown-link">
            {{currentUser.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->

      </div>
      <div class="layout-navbox mt-20">
        <div class="menuItem" v-for="item in manageMenus" :key="item.name" @click="redirectMenu(item)"
             :class=" item.path=== key ? 'menuActive':''">{{item.meta.title}}</div>
      </div>
      <el-dropdown trigger="click" @command="handleUserCommand">
        <div class="layout-loginout-box">
          <i class="el-icon-setting"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-aside>
    <el-main>
      <router-view :key="key" />
    </el-main>
  </el-container>
</template>

<script>
import { manageMenus } from '@/router'
import {removeToken} from "@/utils/auth";
import { MessageBox } from 'element-ui'
export default {
  name: "Layout",
  computed: {
    key() {
      return this.$route.path
    },
    manageMenus() {
      return manageMenus
    },
    currentUser(){
      return JSON.parse(localStorage.getItem("userinfo"))
    }
  },
  methods:{
    redirectMenu(item){
      if (item.meta.type === 'link') {
        window.open(item.path)
      } else {
      this.$router.push(item.path)
      }
    },
    handleUserCommand(command){
      if (command === 'logout'){
        MessageBox.confirm('确认退出吗', '确认退出', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning'
        }).then(() => {
            removeToken();
            this.$router.push('/login');
        })
      }
    }
  }
}
</script>

<style scoped>
.menuItem{line-height: 45px;padding-left: 40px;cursor: pointer;color: #fff;font-size: 14px;}
.menuItem:hover{background-color: rgb(121, 187, 255)}
.menuActive{color: #409eff;background-color: #fff}
.el-dropdown-link {cursor: pointer; color: #fff;}

.layoutMain{ height: 100%; }
.layout-aside{ background-color: #409eff;min-height: 300px; }
.layout-aside-content{padding-top: 20px;height: 120px;text-align: center;color: #fff}
.mt-20{margin-top: 20px;}
.layout-navbox{height: calc(100% - 220px);}
.layout-loginout-box{width:200px;height: 60px;line-height: 60px;text-align: center;font-size: 32px;color: #fff;cursor: pointer;}
.layout-loginout-box:hover{background-color: rgb(121, 187, 255)}

</style>
